<template>
  <div class="table-slowlog-root">
    <el-table border height="100%" tooltip-effect="dark" :data="tableDatas">
      <el-table-column>
        <template #header>
          <div class="table-title">
            Redis 慢日志列表, 可在右上角设置慢日志阈值
          </div>
        </template>
        <el-table-column prop="id" width="80" label="ID" />
        <el-table-column prop="timestamp" width="160" label="日期">
          <template #default="scope">
            <div v-html="secondsToDatetime(scope.row.timestamp)"></div>
          </template>
        </el-table-column>
        <el-table-column prop="duration" width="50" label="用时" />
        <el-table-column prop="args" min-width="50" label="命令" />
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { slowLogApi } from "@/api/redis";
import { secondsToDatetime } from "@/assets/utils/util";

const tableDatas = ref([{}])

const getSlowlogApi = () => {
  tableDatas.value = []
  slowLogApi().then(resp => {
    tableDatas.value = resp.data;
  })
}

const reload = () => {
  getSlowlogApi();
}

onMounted(() => {
  getSlowlogApi();
})

defineExpose({
  reload
})
</script>

<style scoped lang="scss">
.table-slowlog-root {
  @include box(100%, 100%);
  padding: 10px;

  .table-title {
    @include themeColor(#AE564C, #aa4d45);
    font-size: 15px;
    padding: 5px 0;
  }

  :deep(.el-table--small .el-table__cell) {
    padding: 1px 0;
  }
}
</style>